<template>
 <div class="star"         :class='"star-"+fontSize' >
                  <span class="star-item "
                  
                  v-for="(item,index) in   filterStar"  
                  :key="index"
                  :class="item"
                  ></span>
                  <!-- <span class="star-item on"></span>
                  <span class="star-item on"></span>
                  <span class="star-item half"></span>
                  <span class="star-item off"></span> -->
 </div>
</template>

<script>
export default {
    props:['fontSize','ratings'],
  name: '',
  data () {
    return {
    }
  },
  methods: {},
  computed: {
      filterStar(){

        //   var  starArr=['on','on','on','half','off'];
        //  4.7    4 on    1 half     
        // 3.2    3  on     2 off 
        //  3.5    3on     1 half  1 off 
        let  starArr=[];

        let    ratings=this.ratings;

      //判断全星的数量
       var AllStarCount=   Math.floor(ratings);
       console.log(AllStarCount);

       for(var i=0;i<AllStarCount;i++) {
            starArr.push('on');
       }
       //判断半颗星的数量 
       
     let  halfStarCount=(ratings-AllStarCount)*10-5;
     if(halfStarCount>=0) {
          starArr.push('half');
     }

     //判断灰星的数量
     while(starArr.length<5) {
                starArr.push('off');
     }


     return   starArr
  













          
      }
  },
}
</script>


<style scoped lang="stylus">
@import '../../common/stylus/mixins.styl'
                        .star 
                            float left
                            font-size 0
                            .star-item
                              display inline-block
                              background-repeat no-repeat
                            &.star-48
                              .star-item
                                width 20px
                                height 20px
                                margin-right 22px
                                background-size 20px 20px
                                &:last-child
                                  margin-right: 0
                                &.on
                                  bg-image('./images/stars/star48_on')
                                &.half
                                  bg-image('./images/stars/star48_half')
                                &.off
                                  bg-image('./images/stars/star48_off')
                            &.star-36
                              .star-item
                                width 15px
                                height 15px
                                margin-right 6px
                                background-size 15px 15px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('./images/stars/star36_on')
                                &.half
                                  bg-image('./images/stars/star36_half')
                                &.off
                                  bg-image('./images/stars/star36_off')
                            &.star-24
                              .star-item
                                width 10px
                                height 10px
                                margin-right 3px
                                background-size 10px 10px
                                &:last-child
                                  margin-right 0
                                &.on
                                  bg-image('./images/stars/star24_on')
                                &.half
                                  bg-image('./images/stars/star24_half')
                                &.off
                                  bg-image('./images/stars/star24_off')
                        

</style>